<template>
	<sysJk :label="(examType==1?'3':'1')+'.火灾自动报警系统工作状态判断'" showBack :withoutTop="true" :leftTime="leftTime">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="taskTit" style="text-align: left;width:100%;font-size: 2.5vh;">
					【1/1】请通过面板指示灯和显示屏文字信息判断 火灾自动报警系统工作状态
				</view>
				<view class="innerContent" style="position:relative;width:100%;height:100%">
					<image :src="bUrl" style="width:100%;height:100%;display:block"></image>
					<view class="myCard" style="position: absolute;left:0;top:0;width:100%;height:100%" id="myCard">
						<view class="cardContent">
							<image v-if="showPic==2" class="maskLight" style="position: absolute;"
								:src="requestUrl+'/static/image/back.png'"
								:style="{left:425*widthBl+'px',top:355*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}">
							</image>

							<view class="handleBtn">

								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}"
									v-if="examType==1" @click="showFlag=true">查看解析</u-button>

							</view>
							<view class="btnArea">
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="handle">提交</u-button>
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="reDo">重做</u-button>
								<u-button
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="goBack">返回</u-button>
							</view>
							<view class="writeBox" v-if="showPic==1" id="writeBox"
								:style="{left:writeBoxLeft,top:writeBoxTop}" @tap="showDialog"
								style="text-align: center;">
								<image v-if="showPic==1" src="https://www.xfzsb.com/static/image/open.png"
									mode="widthFix" style="width:20px"></image>
							</view>
							<view class="writeBox" v-if="showPic==2" id="timeBox"
								:style="{left:380*widthBl+'px',top:90*heightBl+'px',width:215*widthBl+'px',height:75*heightBl+'px'}"
								style="text-align: center;">
								<text style="color:red">{{showTime}}</text>
							</view>

							<view class="writeBox2" v-if="showPic==2" id="writeBox2"
								:style="{right:100*widthBl+'px',top:70*heightBl+'px'}" @tap="returnOne"
								style="text-align: center;">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="showInfoBox" id="showInfoBox" v-if="showPic==2"
								:style="{left:showInfoBox.left,top:showInfoBox.top,width:510*widthBl+'px',height:265*heightBl+'px'}"
								@tap="showDialog">
								<view class="" style="color:#fff" :style="{height:30*heightBl+'px'}">
									火警信息
								</view>
								<view class="" style="display: flex;">
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px'}"
										style="display: flex;flex-direction: column;justify-content: flex-start;">
										<view class="" style="text-align:left">
											首警：{{showDate}}
										</view>
										<view class="" style="text-align:left">
											1-1 感温探测器火警
										</view>
										<view class="" style="text-align:left">
											负一层电梯旁
										</view>


									</view>
									<view class=""
										:style="{width:150*widthBl+'px',height:200*heightBl+'px',padding:10*widthBl+'px',boxSizing:'border-box',paddingBottom:0}"
										style="display:flex;flex-direction:column;justify-content: space-between;">
										<view class="" :style="{height:80*heightBl+'px'}">
											<view class="">
												正常 运行
											</view>
											<view class="">
												手动： 允许
											</view>
											<view class="">
												自动：{{handleByAutoFlag?'允许':'禁止'}}
											</view>
										</view>
										<view class="" v-if="showPic==2" id="timechangeBox"
											style="text-align: center;color:#fff;font-size:1vh">
											<view class="dateInfo">
												{{formatTime(new Date(),'yyyy-MM-dd')}}
											</view>
											<view class="timeInfo">
												{{changedTime}}
											</view>
										</view>
									</view>
								</view>
								<view class="" style="color:#fff">
									F1查火警 F2查启动 F3查故障 F4查监管 F5查屏蔽 F6查反馈
								</view>
							</view>

							<view class="answerBox" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									请判断火灾自动报警系统的工作状态（多选）
								</view>
								<view class="answerSelect">

									<checkbox-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
											:key="item.value"
											style="display: flex;margin-bottom: 5px;align-items: center;">
											<view>
												<checkbox :value="item.value"
													:checked="result.includes(String(item.value))"
													:style="{transform:'scale('+heightBl+')'}" />
											</view>
											<view>{{item.name}}</view>
										</label>
									</checkbox-group>
								</view>
							</view>
						</view>

					</view>

				</view>

				<u-mask :show="showFlag" @click="onClickHide">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block"
							style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle">
								【试题解析】 正确答案
							</view>
							<view class="overtitle">
								通过指示灯、文字、声音判断主机工作状态，该题考核指示灯
							</view>
							<view class="overtitle">
								正确答案：火警指示状态,启动指示状态,屏蔽指示状态
							</view>
						</view>
					</view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>


<script>
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	import sysJk from '@/components/sysJk.vue'
	import {
		fzQuestion
	} from '@/globalApi/requestApi.js'
	import {
		formatTime
	} from '@/util/index.js'
	export default {
		components: {
			sysJk
		},


		data() {


			return {
				// duringTime,
				examType: 1,
				widthBl: 0,
				heightBl: 0,
				writeBox: {
					width: 0,
					height: 0
				},
				writeBoxLeft: 0,
				writeBoxTop: 0,
				showFlag: false,
				showPic: 1,
				requestUrl: baseUrl,
				bUrl: baseUrl + "/static/image/jk/1-1.jpg",
				showWhiteBox: true,
				result: [],
				examId: '',
				formatTime,
				handleByAutoFlag: false,
				showInfoBox: {
					right: '',
					top: ''
				},
				changedTime: null,
				items: [{
						value: "火警指示状态",
						checked: false,
						name: "火警指示状态",
					},
					{
						value: "监管指示状态",
						checked: false,
						name: "监管指示状态",
					},
					{
						value: "故障指示状态",
						checked: false,
						name: "故障指示状态",
					},
					{
						value: "启动指示状态",
						checked: false,
						name: "启动指示状态",
					},
					{
						value: "屏蔽指示状态",
						checked: false,
						name: "屏蔽指示状态",
					}

				],
				leftTime: '60',
				innerAudioContext: null,
				showTime: null,
				showDate: null
			}
		},
		onLoad(options) {
			this.examId = options.examId
			this.examType = options.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('#myCard')
			// writeBox.boundingClientRect(data => {
			// this.writeBox = data
			// }).exec()
			this.createAudio()
		},
		onShow() {
			this.createTime()
		},
		onReady() {
			this.$nextTick(function() {
				this.drawWhiteBox()
			})
		},
		beforeDestroy() {
			this.innerAudioContext.stop()
		},
		methods: {
			createTime() {
				// this.showTime=this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				let that = this
				// this.showTime = this.formatTime(new Date(),'HH:mm')
				this.showDate = this.formatTime(new Date(), 'yy/MM/dd HH:mm:ss')
				setInterval(function() {
					that.showTime = that.formatTime(new Date(), 'HH:mm')
					that.changedTime = that.formatTime(new Date(), 'HH:mm:ss')
				}, 1000)
			},
			createAudio() {
				var that = this;
				that.innerAudioContext = uni.createInnerAudioContext();
				that.innerAudioContext.autoplay = true; //自动播放
				that.innerAudioContext.loop = true; //循环播放
				//只要音频路径是网络路径，基本上没啥问题了，本地路径好像就不行
				that.innerAudioContext.src = app.globalData.imgUrl + 'jb.MP3';

				that.innerAudioContext.volume = 0.8;
				that.innerAudioContext.onPlay(() => { //可以播放事件
					console.log('开始播放');
					// that.playing = !innerAudioContext.paused;//查看是否可以自动播放
				});
				that.innerAudioContext.onError((res) => {
					onsole.log(res.errMsg);
					console.log(res.errCode);
				});

			},
			seeFun() {
				this.showFlag = true
			},
			reDo() {
				let that = this
				this.result = []
				this.showPic = 1
				this.bUrl = baseUrl + "/static/image/jk/1-1.jpg"
			},
			returnOne() {
				this.bUrl = baseUrl + "/static/image/jk/1-1.jpg"
				this.showPic = 1
			},
			goBack() {
				uni.navigateBack()
			},
			handle() {
				let that = this
				let correctData = ['火警指示状态', '屏蔽指示状态', '启动指示状态']
				let isCorrect = false
				if (that.result.length == 0) {
					uni.showToast({
						title: '请选择至少一个答案',
						icon: 'none'
					})
					return
				}
				if (that.result && that.result.length == 3) {
					//every() 每一个都是true则返回true，如果有一个是false，那么直接返回false；
					isCorrect = that.result.every((item, index) => {
						//判断的条件为a数组的每一项在b数组内查找不等于-1就代表有，有就为true，所有都是true就返回true
						return correctData.indexOf(item) !== -1;
					});
				} else {
					isCorrect = false
				}

				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',

				}).then(res => {
					fzQuestion({
						fz_id: that.examId,
						title: '火灾自动报警系统工作状态判断',
						no: '1-1',
						question_type: 2,
						user_answer: that.result,
						answer: '',
						is_correct: isCorrect,
						score: isCorrect ? 5 : 0,
						start_time: '',
						end_time: '',
						question_answer: ''
					}).then(res => {
						let pages = getCurrentPages()
						let prevPage = pages[pages.length - 2]
						prevPage.$vm.status1 = true
						prevPage.$vm.addScore(isCorrect ? 5 : 0)
						uni.navigateBack()


					})


				})
			},
			showDialog() {
				// this.showFlag = true
				this.bUrl = baseUrl + "/static/image/jk/1-2-1.jpg"
				this.showWhiteBox = false
				this.showPic = 2
			},
			onClickHide() {
				this.showFlag = false
			},
			drawWhiteBox() {
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard')
				warp.boundingClientRect(data => {
					var widthBl = data.width / 1920
					var heightBl = data.height / 921
					this.widthBl = widthBl
					this.heightBl = heightBl
					this.writeBox.width = 100 * widthBl + 'px'
					this.writeBoxLeft = 650 * widthBl + 'px'
					this.writeBoxTop = 420 * heightBl + 'px'
					this.writeBox.height = 100 * heightBl + 'px'
					this.showInfoBox.left = 1121 * widthBl + 'px'
					this.showInfoBox.top = 95 * heightBl + 'px'
				}).exec()

				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			},
			onChange(e) {

				this.result = e.detail.value
			},
			nextTask() {
				uni.navigateTo({
					url: '../jkB/jkB'
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.myCard {
			width: 100%;
			height: 100%;
			position: relative;
			// border-radius: 20rpx;
			// overflow: hidden;
			// z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				// z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				.taskTit {
					width: 100%;
					text-align: left;
					background: #fff;
					color: #000
				}

				.handleBtn {
					position: absolute;
					left: 30px;
					bottom: 0px
				}

				.btnArea {
					// margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position: absolute;
					right: 30px;
					bottom: 0px // text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			width: 100px;
			height: 100px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.writeBox2 {
			width: 60px;
			height: 60px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.answerBox {
			position: absolute;
			left: 35px;
			top: 0%;
			font-size: 2vh;
			background: #fff;
			color: #000;

			// width:20%;
			.answerTit {
				background: orange
			}
		}

		.answerSelect {
			padding: 10px 0;
			box-sizing: border-box;
		}

		.showInfoBox {
			position: absolute;
			// background: #fff;
			color: #000;
			font-size: 1.5vh;
		}
	}
</style>